<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<md-content flex class="workspace-projects-content">

  <che-list-header-additional-parts>
    <div che-multi-transclude-part="che-list-add-button">
      <add-project-popover is-project-name-unique="workspaceDetailsProjectsCtrl.isProjectNameUnique(name)"
                           project-on-add="workspaceDetailsProjectsCtrl.projectTemplateOnAdd(templates)"></add-project-popover>
    </div>
    <div che-multi-transclude-part="che-list-delete-button">
      <che-list-header-delete-button ng-if="workspaceDetailsProjectsCtrl.cheListHelper.isNoItemSelected === false"
                                     title="Delete"
                                     disabled="workspaceDetailsProjectsCtrl.workspaceIsRunning() === false"
                                     disabled-message="Projects cannot be removed in stopped workspace."
                                     on-delete="workspaceDetailsProjectsCtrl.deleteSelectedProjects()"></che-list-header-delete-button>
    </div>
    <div che-multi-transclude-part="che-list-search">
      <che-list-header-search placeholder="Search"
                              query="workspaceDetailsProjectsCtrl.projectFilter.name"
                              on-change="workspaceDetailsProjectsCtrl.onSearchChanged(query)"></che-list-header-search>
    </div>
  </che-list-header-additional-parts>

  <che-list-header
    che-hide-header="workspaceDetailsProjectsCtrl.cheListHelper.visibleItemsNumber === 0">
    <div flex="100"
         layout="row"
         layout-align="start stretch"
         class="che-list-item-row">
      <div layout="column" layout-gt-xs="row"
           layout-align="start center"
           class="che-checkbox-area">
        <div layout="row" layout-align="center center" class="che-list-item-checkbox-main">
          <md-checkbox class="che-list-item-checkbox"
                       aria-label="Project list"
                       ng-checked="workspaceDetailsProjectsCtrl.cheListHelper.areAllItemsSelected"
                       ng-click="workspaceDetailsProjectsCtrl.cheListHelper.changeBulkSelection()"></md-checkbox>
        </div>
      </div>
      <div flex hide-xs layout-gt-xs="row"
           layout-align="start center"
           class="che-list-item-details">
        <che-list-header-column flex-gt-xs="30"
                                che-sort-value="workspaceDetailsProjectsCtrl.projectOrderBy"
                                che-sort-item="name"
                                che-column-title="Name"></che-list-header-column>
        <che-list-header-column flex-gt-xs="50"
                                che-sort-value="workspaceDetailsProjectsCtrl.projectOrderBy"
                                che-sort-item="description"
                                che-column-title="Description"></che-list-header-column>
        <che-list-header-column flex-gt-xs="20"
                                che-column-title="Actions"></che-list-header-column>
      </div>
    </div>
  </che-list-header>

  <che-list class="workspace-details-projects-list" flex ng-show="workspaceDetailsProjectsCtrl.cheListHelper.visibleItemsNumber > 0">
    <che-project-item
            ng-repeat="project in workspaceDetailsProjectsCtrl.cheListHelper.getVisibleItems() | orderBy:workspaceDetailsProjectsCtrl.projectOrderBy"
            che-project-item-workspace="workspaceDetailsProjectsCtrl.workspaceDetails"
            che-on-checkbox-click="workspaceDetailsProjectsCtrl.cheListHelper.updateBulkSelectionStatus()"
            ng-model="workspaceDetailsProjectsCtrl.cheListHelper.itemsSelectionStatus[project.name]"
            che-project-item-project="project"
            che-profile-creation-date="workspaceDetailsProjectsCtrl.profileCreationDate"
            che-has-action="false === workspaceDetailsProjectsCtrl.isNewProject(project.name)"
            flex-gt-sm="100" flex="33"></che-project-item>
  </che-list>
  <div class="che-list-empty">
        <span ng-show="workspaceDetailsProjectsCtrl.projects.length > 0 && workspaceDetailsProjectsCtrl.cheListHelper.visibleItemsNumber === 0">
          No projects found.
        </span>
    <span ng-show="workspaceDetailsProjectsCtrl.projects.length === 0">There are no projects.</span>
  </div>
</md-content>
